<template>
  <div class="out-box">
    <div class="content-ab" v-if="screenWidth > 1024  && !isMobile()">
      <div class="img-list">
        <div v-for="(item, index) in caseList" :key="index">
          <changeImages :imgList="item.caseDesignList" :caseTypeStr="item.caseTypeStr"  @click="toAllcase(item.caseTypeStr)"></changeImages>
        </div>
      </div>
    </div>
    <div class="content-ab-mobel" v-if="screenWidth <= 1024 || isMobile()">
      <div class="img-list-mobel">
        <div v-for="(item, index) in caseList" :key="index">
          <changeMobel :imgList="item.caseDesignList" :caseTypeStr="item.caseTypeStr"  @click="toAllcase(item.caseTypeStr)"></changeMobel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listByType } from "@/api/defapi";

import brandImageMobel from "@/components/brandImageMobel.vue";
import scrollHandle from "@/components/scrollHandle.vue";
import changeImages from "@/components/changeImages.vue";
import changeMobel from "@/components/changeMobel.vue"

import brandImages from "@/components/brandImages.vue";


export default {
  components: {
    changeImages,
    brandImages,
    scrollHandle,
    brandImageMobel,
    changeMobel
  },
  data() {
    return {
      screenWidth: window.innerWidth,
      bannerImgList: '',
      baseApi: process.env.VUE_APP_IMGADDRESS,
      caseList: ''
    };
  },
  mounted() {
    window.addEventListener("resize", this.getScreenSise);
    listByType({type:2}).then(res => {
      this.caseList = res.data.filter(item=>item.caseDesignList && item.caseDesignList.length>0)
    })
  },
  methods: {
    isMobile() {
      const userAgentInfo = navigator.userAgent;
      const mobileAgents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod",
      ];
      const mobileFlag = mobileAgents.some((mobileAgent) => {
        return userAgentInfo.indexOf(mobileAgent) > 0;
      });

      let isPro = /Version\/.* Safari/.test(userAgentInfo); // 检查是否有Safari标识，通常iPad Pro才会有

      // 更精确的检测方式，检查屏幕尺寸或像素比（PPI）
      let pixelRatio = window.devicePixelRatio;
      let isHighResolution =  pixelRatio >= 2; // iPad Pro的大约分辨率为1024x1366，像素比为2或3

      let isipadpro = isPro && isHighResolution;
      console.log(isipadpro, isPro, isHighResolution);

      let isiPad = (navigator.userAgent.match(/(iPad)/) || (navigator.userAgent.match(/(Macintosh)/) && navigator.maxTouchPoints >= 1));
      return mobileFlag || isiPad;
    },
    getScreenSise() {
      this.screenWidth = window.innerWidth;
    },
    toAllcase(val){
      this.$emit("toAllcase",val)
    }
  },
};
</script>

<style lang="scss" scoped>
.out-box {
  background-color: #fff;
  width: 100%;
}

.content-ab {
  padding: 0 100px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.img-list {
  width: 100%;
  // padding: 0 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 40px;
}

.content-ab-mobel {
  background-color: #fff;
  padding: 0 3.2rem;
  width: 100%;
}

.img-list-mobel {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5.6rem;
}

.all-txt {
  font-family: "BebasFontB";
  font-size: 44px;
  padding-bottom: 42px;
}

.all-txt-mobel {
  font-family: "BebasFontB";
  font-size: 3.8rem;
  padding-bottom: 4rem;
}

</style>